<template>
	<view class="content">
		<view class="index-camera"
			style="background-image: url('http://tianyu1993.oss-cn-beijing.aliyuncs.com/mp/imgs/camera-bg.png')">
			<camera device-position="back" flash="off" @error="error"></camera>
			<view class="index-camera-scan"></view>
		</view>


		<view class="bottom">
			<view class="back" @click="back">
				<image src="../../static/images/err.png" mode=""></image>
			</view>
			<view class="photo-btn" @click="takePhoto">
				<image src="../../static/images/scan-btn.png" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import {
		ref
	} from "vue";

	const imgList = ref()
	const base64Img = ref()
	const ctx = uni.createCameraContext();

	//定时扫描
	function takePhoto() {
		//点击拍照 拍照区域出现扫描感觉 拍照按钮禁用加载中。
		ctx.takePhoto({
			quality: 'high',
			success: (res) => {
				imgList.value = res.tempImagePath
				console.log(imgList.value);
				wx.getFileSystemManager().readFile({ // 读取本地文件内容
					filePath: res.tempImagePath,
					encoding: 'base64', //编码格式
					success(res) {
						console.log(res.data); //图片base64编码
						base64Img.value = res.data
						//在这里调用后端接口
						// 如果后端有返回信息，跳转到物流编号查询页面，如果后端没有返回一直扫 用户按退出按钮可以退出。
					}
				})
			}
		});
	}
	
	function back(){
		uni.navigateBack({
			delta:1
		})
	}
</script>

<style lang="scss" scoped>
	.box {
		margin: 100rpx;
	}

	.index-camera {
		width: 100vw !important;
		height: 80vh;
		background-size: 100% 100%;
		padding: 3px;
		position: relative;
	}

	.index-camera camera {
		width: 100%;
		height: 100%;
	}

	.index-camera-scan {
		position: absolute;
		width: calc(100% - 6px);
		height: calc(100% - 6px);
		top: 3px;
		left: 3px;
		background: linear-gradient(180deg, rgba(59, 92, 252, 0.2) 0%, rgba(204, 204, 204, 0) 100%);
		border-bottom: 1px solid #445ECC;
		animation: cameraScan 3s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		z-index: 2;
	}

	@keyframes cameraScan {
		0% {
			height: calc(100% - 6px);
		}

		50% {
			height: 0;
		}

		100% {
			height: calc(100% - 6px);
		}
	}

	.photo-btn {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #309bff;
		border-radius: 50%;
		width: 10vh;
		height: 10vh;
		font-size: 3vw;
	}

	.photo-btn image {
		width: 50%;
		height: 50%;
		// margin-bottom: 1vh;
	}
	.bottom{
		width: 60%;
		display: flex;
		// justify-content: center;
		justify-content: space-between;
		align-items: center;
		margin-top: 2vh;
	}
	.back{
		margin-left: 4vw;
	}
	.back image{
		width: 6vh;
		height: 6vh;
	}
</style>
